<template>
	<view class="content">
			<view class="uni-panel">
				<view class="uni-panel-item">
					<text class="uni-text-item">原密码</text>
					<input class="uni-input" placeholder="请输入原密码" password="true" v-model="oldPassword"/>
				</view>
				<view class="uni-panel-item">
					<text class="uni-text-item">新密码</text>
					<input class="uni-input" placeholder="请输入新密码" password="true" v-model="newPassword"/>
				</view>
				<view class="uni-panel-item">
					<text class="uni-text-item">新密码</text>
					<input class="uni-input" placeholder="请再输入新密码" password="true" v-model="newPassword1"/>
				</view>
				<view class="uni-panel-item-right">
					<text class="uni-text-item" @click="btnBackClick">返回</text>
				</view>
				
				<button class="uni-btn-login" @click="btnLoginClick">修改密码</button>
			</view>
	</view>
</template>

<script>
	import { resetPwd } from '@/api/api.js';
	import store from "../../store";
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				username: '',
				oldPassword: '',
				newPassword: '',
				newPassword1: '',
			}
		},
		onLoad(options) {
			const userInfo = store.state.app.userInfo;
			if( userInfo){
				this.username = userInfo.username;
			}
		},
		methods: {
			btnLoginClick(){
				if( this.oldPassword == ''){
					uni.showToast({
					    title: '请输入原密码',
						icon: 'error',
					    duration: 2000
					});
					return;
				}
				if( this.newPassword == ''){
					uni.showToast({
					    title: '请输入新密码',
						icon: 'error',
					    duration: 2000
					});
					return;
				}
				if( this.newPassword != this.newPassword1){
					uni.showToast({
					    title: '两次新密码不同',
						icon: 'error',
					    duration: 2000
					});
					return;
				}

				let params = {username:this.username, oldPassword:this.oldPassword, newPassword:this.newPassword};
				resetPwd(params).then(res => {
					console.log(res)
					if( res.code != 0){
						uni.showToast({
						    title: res.msg,
							icon: 'error',
						    duration: 2000
						});
					}else{
						uni.showToast({
						    title: '密码修改成功',
							icon: 'success',
						    duration: 2000
						});
					}
				}).catch(err => {
					uni.showToast({
					    title: err,
						icon: 'none',
					    duration: 2000
					});
				});
			},
			btnBackClick(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/registe.jpg');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.uni-panel-c {
		background-color: white;
		width: 60%;
		height: 80%;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.uni-image {
		width: 50%;
	}
	.uni-image-logo {
		width: 20%;
	}
	.uni-panel {
		margin-left: 52%;
		margin-top: 12%;
		width: 45%;
		height: 54%;
		display: flex;
		flex-direction: column;
	}
	
	.uni-text-logo{
		color: slateblue;
		font-size: 7vmin;
		text-align: center;
		font-weight: bold;
		letter-spacing: 1rpx;
		font-family: "楷体";
	}
	
	.uni-panel-item {
		display: flex;
		align-items: center;
		margin-top: 3%;
		margin-left: 2%;
		font-size: 5vmin;
	}
	
	.uni-panel-item-right {
		display: flex;
		flex-direction: row;
		margin-top: 3%;
		justify-content: flex-end;
		font-size: 5vmin;
	}
	.uni-input{
		font-size: 5vmin;
	}
	
	.uni-text-item{
		width: 20vmin;
		height: 100%;
		text-align: center;
	}
	
	.uni-btn-login {
		margin-top: 4%;
		background-color: royalblue;
		width: 80%;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}
	
</style>
